<template>
  <div class="wrap">
    <div class="search-box">
      <el-icon class="el-icon-search"></el-icon>
      <el-input
        :value="keywords"
        @input="$emit('update:keywords', $event)"
        clearable
        placeholder="请输入用户名或昵称"
      ></el-input>
    </div>
    <div class="time-box">
      <el-date-picker
        type="datetimerange"
        :value="timeRange"
        @input="$emit('update:timeRange', $event)"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      >
      </el-date-picker>
    </div>

    <div class="check-box">
      <el-checkbox-group
        :value="actionSelect"
        @input="$emit('update:actionSelect', $event)"
      >
        <el-checkbox
          v-for="item in actionSelectList"
          :key="item[0]"
          :label="item[0]"
        >
          {{ item[1] }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import { actionMap } from "./SiteAction";

export default {
  name: "SiteActionFilter",
  props: {
    keywords: String,
    timeRange: Array,
    actionSelect: Array,
  },
  data() {
    //  封装 最近一分钟 函数
    const pickHandler =
      (time = 1000 * 60) =>
      (picker) => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - time);
        picker.$emit("pick", [start, end]);
      };
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一分钟",
            onClick: pickHandler(),
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      actionSelectList: [],
    };
  },
  created() {
    //  Object.entries(actionSelectList) :把对象转换成数组
    console.log("////", this.actionMap);
    console.log("222", this.actionSelectList);
    Object.entries(actionMap).forEach((item) =>
      this.actionSelectList.push([item[0], item[1].text])
    );

    // console.log(this.actionSelectList)
    // console.log( Object.entries(actionMap))
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  padding-left: 10px;
  div {
    margin-bottom: 20px;
  }
  .search-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 32px;
    margin-top: 26px;

    .el-input {
      margin-left: 12px;
      width: 210px;
      ::v-deep.el-input__inner {
        border: none;
        border-bottom: 2px solid #d9d9d9;
      }
    }
  }
  .time-box div {
    width: 402px;
  }
  .check-box {
    padding: 40px 40px;
    width: 402px;
    height: 140px;
    border: 1px solid #cccccc;
    border-radius: 10px;
  }
}
</style>
